<template>
  <div class="app-container home">



    <el-row :gutter="20">
      <!--用户欢迎-->
      <el-col :xs="8" :sm="8" :md="8" :lg="8">
        <el-card>
          <div class="userCard">
            <el-avatar :size="150" :src=imgUrl></el-avatar>
            <div class="userInfo">
              <p class="important-font">{{username}}</p>
              <p class="secondary-font">{{deptname}}</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录时间: {{logindate}}</p>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="8" :md="8" :lg="8">
        <el-card class="update-log1">
          <h3 class="title-h3">
            申请记录<br/>
            <div class="size-icon">
              <i class="el-icon-document"></i>
            </div>
          </h3>
          <h2 class="check">
            {{checknum}}
          </h2>
        </el-card>
      </el-col>

      <!--在审-->
      <el-col :xs="8" :sm="8" :md="8" :lg="8">
        <el-card class="update-log2">
          <h3 class="title-h3">
            在审记录<br/>
            <div class="size-icon">
              <i class="el-icon-s-promotion"></i>
            </div>
          </h3>
          <h2 class="check">
            {{checkin}}
          </h2>
        </el-card>
      </el-col>

      <!--通过-->
      <el-col :xs="8" :sm="8" :md="8" :lg="8">
        <el-card class="update-log3">
          <h3 class="title-h3">
            已通过<br/>
            <div class="size-icon">
              <i class="el-icon-check"></i>
            </div>
          </h3>
          <h2 class="check">
            {{checkok}}
          </h2>
        </el-card>
      </el-col>

      <!--未通过-->
      <el-col :xs="8" :sm="8" :md="8" :lg="8">
        <el-card class="update-log4">
          <h3 class="title-h3">
            未通过<br/>
            <div class="size-icon">
              <i class="el-icon-close"></i>
            </div>
          </h3>
          <h2 class="check">
            {{checkno}}
          </h2>
        </el-card>
      </el-col>

    </el-row>

    <!--图表展示及维护信息-->
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :md="12" :lg="12">

        <el-card>
          <div class = echart id="baritem" style="background-color:white;margin:0px;width:auto;height:300px;padding-top:0px;" ></div>
        </el-card>

      </el-col>

      <el-col :xs="12" :sm="12" :md="12" :lg="12">

        <el-card>
          <div class = echart id="pieitem" style="background-color:white;margin:0px;width:auto;height:300px;padding-top:0px;" ></div>
        </el-card>

      </el-col>

    </el-row>
  </div>
</template>

<script>
import { getInfo } from "@/api/login";
import moment from 'moment';
import { getCheckNum, getCheckIn, getCheckOk, getCheckNo } from "@/api/system/check";
import { listItem} from "@/api/warehousemanager/item";
import {barItem,pieItem,Arrayobj,objName} from "@/api/warehousemanager/statiscs"
import { listCheck} from "@/api/warehousemanager/check";


export default {
  name: "Index",
  data() {
    return {
      imgUrl:require('../assets/images/myprofile.jpg'),
      username:"",
      deptname:"",
      logindate:"",
      checknum:0,
      checkin:0,
      checkok:0,
      checkno:0,
      // 查询审核全部参数
      checkqueryParams: {
        pageNum: 1,
        pageSize: 10,
        itemId: null,
        itemName: null,
        itemNum: null,
        itemUnit: null,
        deptId:this.$store.getters.deptId,
        // checkApplicant: this.$store.getters.name,
        checkAuditor: null,
        checkApplicationTime: null,
        checkAuditingTime: null,
        applyType: null,
        applyOperateType: null,
        status: null,
        content: null,
        checkRemark: null
      },
      // 查询审核进行中参数
      checkqueryinParams: {
        pageNum: 1,
        pageSize: 10,
        itemId: null,
        itemName: null,
        itemNum: null,
        itemUnit: null,
        deptId:this.$store.getters.deptId,
        // checkApplicant: this.$store.getters.name,
        checkAuditor: null,
        checkApplicationTime: null,
        checkAuditingTime: null,
        applyType: null,
        applyOperateType: null,
        status: 2,
        content: null,
        checkRemark: null
      },
      // 查询审核未通过参数
      checkquerynoParams: {
        pageNum: 1,
        pageSize: 10,
        itemId: null,
        itemName: null,
        itemNum: null,
        itemUnit: null,
        deptId:this.$store.getters.deptId,
        // checkApplicant: this.$store.getters.name,
        checkAuditor: null,
        checkApplicationTime: null,
        checkAuditingTime: null,
        applyType: null,
        applyOperateType: null,
        status: 1,
        content: null,
        checkRemark: null
      },
      // 查询审核已通过参数
      checkqueryokParams: {
        pageNum: 1,
        pageSize: 10,
        itemId: null,
        itemName: null,
        itemNum: null,
        itemUnit: null,
        deptId:this.$store.getters.deptId,
        // checkApplicant: this.$store.getters.name,
        checkAuditor: null,
        checkApplicationTime: null,
        checkAuditingTime: null,
        applyType: null,
        applyOperateType: null,
        status: 0,
        content: null,
        checkRemark: null
      },
      //物品参数
      itemqueryParams: {
        itemId:null,
        itemName: null,
        itemNum: null,
        itemType:null,
        typeName:null,
      },
      itemList : [],
      tempitemList :[],
      //bar参数
      xdata :null,
      ydata:null,
      //pie参数
      temptitle :[],
      title:[],
      num:[],
      result :null,
      // 版本号
      version: "3.8.5"
    };
  },
  created() {
    this.getUserInfo();
    this.darwItem();
    this.darwItemType();
  },
  methods: {
    getUserInfo(){
      getInfo().then(res => {
        this.username = res.user.userName;
        this.logindate = moment(res.user.loginDate).format('YYYY-MM-DD HH:mm:ss');
        this.deptname = res.user.dept.deptName;
        listCheck(this.checkqueryParams).then(response => {
          this.checknum = response.total;
        });
        listCheck(this.checkqueryinParams).then(response => {
          this.checkin = response.total;
        });
        listCheck(this.checkquerynoParams).then(response => {
          this.checkno = response.total;
        });
        listCheck(this.checkqueryokParams).then(response => {
          this.checkok = response.total;
        });
        /*getCheckNum(this.username).then(res => {
          this.checknum = res.data;
        });
        getCheckIn(this.username).then(res => {
          this.checkin = res.data;
        });
        getCheckOk(this.username).then(res => {
          this.checkok = res.data;
        });
        getCheckNo(this.username).then(res => {
          this.checkno = res.data;
        });*/
      });
    },
    /** 绘制库存统计图 */
    darwItem() {
      listItem(this.itemqueryParams).then(response => {
        this.itemList = response.rows;
        console.log(response.rows);
        this.tempitemList = objName(this.itemList)
                  this.xdata = this.tempitemList.map(data => {
                      return data.itemName;
                  });
                  this.ydata = this.tempitemList.map(data => {
                      return data.itemNum;
                  });
        barItem(this.xdata,this.ydata,'baritem');
      });
    },
    /** 绘制库存类型图 */
    darwItemType() {
      listItem(this.itemqueryParams).then(response => {
        this.itemList = response.rows;
        this.temptitle = this.itemList.map(data => {
          return data.itemType;
        });
        this.title = this.temptitle.map(data => {
          return data.typeName;
        });
        this.num = this.itemList.map(data => {
          return data.itemNum;
        });
        this.result = Arrayobj(this.num,this.title)
        pieItem(this.result,'pieitem');
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log1 {
    margin-bottom: 20px;
    background-color: #00afff;
  }

  .update-log2 {
    margin-bottom: 20px;
    background-color: lightgray;
  }

  .update-log3 {
    margin-bottom: 20px;
    background-color: lightgreen;
  }

  .update-log4 {
    margin-bottom: 20px;
    background-color: hotpink;
  }

  .check{
    float:right;
    color:white;
  }

  .title-h3{
    color:white;
    float: left;
    height: auto;
    margin-top: auto;
  }

  .size-icon{
    margin-top: 10px;
    font-size: 50px;
  }
}

/////////////////////////////////////////////////////////
.el-card__body {
  padding: 10px;
}

.userCard {
  height: 160px;
  display: flex;
  border-bottom: 2px solid #DCDFE6;
  border-radius: 2px;
}

.userInfo {
  width: auto;
  padding: 6% 0 0 6%;
}

.important-font {
  font-weight: 900;
  font-size: 25px;
}

.secondary-font {
  color: #909399;
}

.login-info {
  height: 40px;
  text-align: left;
  color: #909399;
}

.tableInfo {
  margin: 20px 0 0 0;
}

.OrderCard {
  margin: 0 0 30px 30px;
  border: #DCDFE6 1px solid;
  border-radius: 10px;

  i {
    width: 30%;
    line-height: 120px;
    font-size: 30px;
    color: #fff
  }

  div {
    width: 300px;
  }
}

.num {
  display: flex;
  flex-wrap: wrap;
}

.graph {
  margin: 15px 0 0 0;
}

</style>

